<template>
	<div class="flex">
		<div class="Title_Info">
			<div class="Title_Info_Item">
				<div class="Item_img">
					<img src="@/assets/images/菜单.png" alt="" />
				</div>
				<span>时间</span>
				<span>{{ time }}</span>
			</div>
			<div class="Title_Info_Item">
				<div class="Item_img">
					<img src="@/assets/images/菜单.png" alt="" />
				</div>
				<span>收藏</span>
				<span>{{ parseInt(Math.random(1) * 10000) }}人</span>
			</div>
		</div>

		<h1>大家的笔记</h1>
		<!-- 四张图片begin -->
		<div class="pic_Box">
			<div class="pic_Item">
				<img src="@/assets/images/今日推荐.jpg" alt="" />
			</div>
			<div class="pic_Item">
				<img src="@/assets/images/今日推荐.jpg" alt="" />
			</div>
			<div class="pic_Item">
				<img src="@/assets/images/今日推荐.jpg" alt="" />
			</div>
			<div class="pic_Item">
				<img src="@/assets/images/今日推荐.jpg" alt="" />
			</div>
		</div>
		<!-- 四张图片end -->

		<!-- 用户评论begin -->
		<div class="comment">
			<div class="userInfo">
				<div class="content">
					<div class="avatar"></div>
					<span>maine</span>
				</div>
				<div class="like">
					<div class="like_img">
						<img src="@/assets/images/赞.png" alt="" />
					</div>
					<span>0</span>
				</div>
			</div>
			<div class="content">
				<span>
					你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
					你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
					你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你
					好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
				</span>
			</div>
		</div>
		<!-- 用户评论end -->
		<div class="notesAll">
			<p>全部笔记<span>12</span>条</p>
		</div>
	</div>
</template>

<script>
export default {
	name: 'FoodDetailInfoEveryoneSNote',
	props: {
		time: {
			type: String,
			default: '没有获取到菜单时间',
		},
	},
};
</script>

<style scoped>
/* 时间、收藏begin */
.Title_Info {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid #eee;
}
.Title_Info_Item {
	display: flex;
	margin: 0 20px 20px 0;
}
.Title_Info .Item_img {
	width: 20px;
	height: 20px;
	margin-right: 10px;
}
.Title_Info .Item_img img {
	width: 100%;
}
.Title_Info span {
	font-size: 10px;
	line-height: 20px;
	margin-right: 10px;
}
/* 时间、收藏end */

.flex {
	width: 100%;
	display: flex;
	flex-direction: column;
	padding: 20px 20px 20px 20px;
}
.flex h1 {
	height: 40px;
	color: #3c454b;
	font-family: Noto Sans SC;
	font-size: 20px;
	font-weight: 500;
	line-height: 30px;
	letter-spacing: 0px;
	text-align: left;
	margin-top: 20px;
}
.flex .pic_Box {
	width: 100%;
	display: flex;
	margin-top: 15px;
	justify-content: space-between;
}
.flex .pic_Box .pic_Item {
	width: 80px;
	height: 80px;
	border-radius: 10px;
	margin-right: 10px;
	overflow: hidden;
}
.flex .pic_Box :last-child {
	margin-right: 0px;
}
.flex .pic_Box .pic_Item img {
	width: 100%;
	height: 100%;
}

/* 评论begin */
.comment {
	background: #f4f4f4;
	padding: 15px 10px 10px 15px;
	margin-top: 12px;
	border-radius: 10px;
}

.userInfo {
	display: flex;
	flex-direction: row;
	width: 100%;
	align-items: center;
	border-radius: 10px;
}
.userInfo > .content {
	display: flex;
	flex-direction: row;
	flex: 1;
	font-size: 16px;
	align-items: center;
}
.userInfo > .content > .avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: #536069;
}
.userInfo > .content > span {
	margin-left: 10px;
	font-weight: 500;
}

.userInfo > .like {
	display: flex;
	flex-direction: row;
	width: 55px;
}

.userInfo > .like > .like_img {
	width: 25px;
	height: 25px;
	bottom: 20px;
	margin-right: 10px;
}
.userInfo > .like > .like_img img {
	width: 100%;
}

.userInfo > .like > span {
	color: #ccc9cc;
	font-size: 18px;
	font-weight: 500;
	line-height: 30px;
}

.comment > .content {
	display: flex;
	margin-top: 15px;
	height: auto;
}
.comment > .content > span {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3; /* 在3行以上显示省略号 */
	-webkit-box-orient: vertical;
	text-indent: 2rem;
}
/* 评论end */

/* 全部笔记begin */
.notesAll {
	width: 100%;
	text-align: center;
	line-height: 40px;
	background-color: #f4f4f4;
	margin-top: 10px;
	border-radius: 20px;
}
/* 全部笔记end */
</style>
